<template>
  <div id="classNumberList">
    <Row style="margin-bottom:10px;text-align:right;">
      <DatePicker
        :editable="false"
        type="daterange"
        :value="timeRange"
        :options="dateOptions"
        placement="bottom-end"
        placeholder="Select date"
        style="width: 300px"
        transfer
        @on-change="changeDate"
      ></DatePicker>
    </Row>
    <Card
      v-if="listCalendarEvents.length == 0"
      style="text-align:center;font-size: 12px;color: #aaa;"
      ><span>暂无课程安排</span></Card
    >
    <Collapse simple v-if="listCalendarEvents.length > 0" accordion>
      <Panel
        :name="event.title"
        v-for="event in listCalendarEvents"
        :key="event.dateStr"
      >
        <span style="font-size:14px;font-weight:bold">{{ event.dateStr }}</span>
        <div slot="content">
          <Card
            style="font-size: 13px;margin-bottom:6px;margin-left:10px;width:30%;display:inline-block;"
            v-for="(classNumber, index) in event.courseList"
            :key="classNumber.classNumberId"
          >
            <p slot="title">
              <a @click="toDetailPage(classNumber)">{{
                classNumber.courseName
              }}</a>
            </p>
            <h4>
              {{ classNumber.start.split(' ')[1] }} -
              {{ classNumber.end.split(' ')[1] }}
            </h4>
          </Card>
        </div>
      </Panel>
    </Collapse>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import { queryTeachSchedule } from '@/api/selfStudy/class_new.js';
import classCommonFun from './classCommonFunMixin.js';
export default {
  name: 'classCourseList',
  props: ['classInfo'],
  mixins: [classCommonFun],
  data() {
    return {
      curPanel: '',
      calendarEvents: [],
      listCalendarEvents: [],
      classNumbers: [],
      timeRange: [],
      monthDay: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
      dateOptions: {
        shortcuts: [
          {
            text: '1周',
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: '1个月',
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: '3个月',
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          }
        ]
      }
    };
  },
  mounted() {
    let oDate = new Date();
    let year = oDate.getFullYear();
    if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
      this.monthDay = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    } else {
      this.monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    }
    this.calendarEvents = [];
    this.queryTeachSchedule();
  },
  computed: {},
  filters: {},
  methods: {
    ...mapMutations(['addBreadItem']),
    changeDate(date) {
      this.timeRange = date;
      this.queryTeachSchedule();
    },
    queryTeachSchedule() {
      let params = {};
      if (this.classInfo) {
        params = {
          classId: this.classInfo.id
        };
      }
      if (this.timeRange.length > 0 && this.timeRange[0]) {
        params.startTime = this.timeRange[0] + ' 00:00:00';
        params.endTime = this.timeRange[1] + ' 23:59:59';
      } else {
        let year = new Date().getFullYear();
        let month = new Date().getMonth() + 1;
        params.startTime =
          new Date().getFullYear() + '-' + month + '-1 00:00:00';
        params.endTime =
          new Date().getFullYear() +
          '-' +
          month +
          '-' +
          this.monthDay[month - 1] +
          ' 23:59:59';
        this.timeRange = [params.startTime, params.endTime];
      }
      queryTeachSchedule(params).then(data => {
        if (data.code == 1) {
          let classNumbers = this.dealClassNumberList(data.attribute.data);
          let listCalendarEvents = {};
          classNumbers.forEach(item => {
            if (!listCalendarEvents[item.dateStr]) {
              listCalendarEvents[item.dateStr] = {
                courseList: [item],
                dateStr: item.dateStr
              };
            } else {
              listCalendarEvents[item.dateStr].courseList.push(item);
            }
            this.listCalendarEvents = Object.values(listCalendarEvents);
          });
        } else {
          this.listCalendarEvents = [];
          this.$Message.warning(data.message);
        }
      });
    },
    toDetailPage(item) {
      this.addBreadItem({ name: this.classInfo.className });
      this.addBreadItem({ name: '课程安排' });
      this.addBreadItem({ name: item.courseName }),
        this.$router.push({
          name: 'courseScheduleDetail',
          params: {
            row: item,
            classInfo: this.classInfo
          }
        });
    }
  }
};
</script>

<style></style>
